La solución cross-app de Sequence permite que sus usuarios utilicen sus embedded wallets del ecosistema en cualquier aplicación con la misma dirección de wallet, sin importar si están fuera de su ecosistema o integradas con Sequence usando conectores de wallet comunes como wagmi. Esto incluye:
  • Marketplaces externos
  • DEXs externos
  • Aplicaciones externas
Arquitectura cross-app
Puede ver una demo de nuestro conector de embedded wallet cross-app aquí.
El embedded wallet cross-app implementa un flujo de comunicación entre la aplicación externa y la aplicación de wallet:
  • La app externa se comunica con la wallet a través del conector cross-app embedded wallet para Wagmi
  • El conector utiliza un ProviderTransport para manejar la comunicación
  • Los mensajes se envían entre ProviderTransport y WalletTransport
  • El componente Wallet gestiona tres funcionalidades principales:
    • Autenticación de usuario
    • Firmado de transacciones
    • Firmado de mensajes
La wallet puede abrirse y enviar mensajes de vuelta a la aplicación externa a través de la capa de transporte, permitiendo una comunicación segura entre aplicaciones. Es importante destacar que, para una integración cross-app, los usuarios deberán confirmar todas las interacciones.
1

Clone nuestra aplicación embedded wallet cross-app y el conector

git clone https://github.com/0xsequence/cross-app-embedded-wallet/tree/master && cd cross-app-embedded-Wallet/wallet
cp .env.example .env
2

Actualice Wallet Transport con su configuración

Agregue las variables de embedded wallet del ecosistema en el archivo .env. Luego, simplemente construya la aplicación de wallet con pnpm build y despliegue en su plataforma preferida, como Cloudflare Pages, con una URL pública.
3

Ejemplo de configuración de aplicación externa

Ahora, configuraremos una aplicación externa de ejemplo donde pasamos la URL del conector de wallet a wagmi.Vaya a la aplicación de ejemplo e instale las dependencias, en particular el paquete de conector cross-app de Sequence @sequence-wallet/cross-app-connector:
cd ../dapp && pnpm install
Luego actualice las variables de entorno con su clave de acceso del proyecto y la URL de la wallet que desplegó previamente:
cp .env.example .env
4

Actualice el conector Wagmi

Por último, puede editar la configuración del conector wagmi ubicada en src/wagmiConfig.ts para su wallet específica. Aquí tiene un ejemplo de configuración que puede proporcionar a la aplicación externa:
import { sequenceCrossAppEmbeddedWallet } from '@0xsequence/cross-app-embedded-wallet-connector'
import { createConfig, http } from 'wagmi'
import { arbitrumNova, arbitrumSepolia } from 'wagmi/chains'

const urlParams = new URLSearchParams(window.location.search)
const walletAppUrl = urlParams.get('walletAppUrl') ?? import.meta.env.VITE_WALLET_URL

const connector = sequenceCrossAppEmbeddedWallet(
  {
    projectAccessKey: import.meta.env.VITE_PROJECT_ACCESS_KEY,
    walletUrl: walletAppUrl,
    chainId: arbitrumNova.id, // Change this to your desired chain
  }
);

export const config = createConfig({
  chains: [arbitrumNova, arbitrumSepolia],
  connectors: [connector],
  transports: {
    [arbitrumNova.id]: http(), // add Chain ID Transport
    [arbitrumSepolia.id]: http()
  }
})
Ahora puede compartir la configuración del conector de wallet con cualquier aplicación para que puedan aprovechar su ecosystem wallet en su aplicación y así sus usuarios puedan usar la misma dirección de wallet.